import React, { useEffect, useState } from 'react';
import { Button, Modal,Form,Input,Select } from 'antd';
import MyUpload from '../myUpload';
import { getCategoryApi } from '@/api/category';
import { addProductApi } from '@/api/product';

const MyModel: React.FC = () => {
  //使用hook获取form实例
let [loginForm]=Form.useForm()
  //选择器的加载动画
  let [selectLoading,setSelectLoading]=useState<boolean>(true)
  const [isModalOpen, setIsModalOpen] = useState(false);
  //类目列表
  const [categoryOption,setCategoryOption]=useState<Array<{label:string,value:string}>>([])
  //控制Modal显示
  const showModal = () => {
    setIsModalOpen(true);
  };
  //点击Modal的确认按钮
  const handleOk = () => {
    // setIsModalOpen(false);
    loginForm.submit()//让表单进行校验
  };
  //点击Modal的取消按钮
  const handleCancel = () => {
    setIsModalOpen(false);
    
  };
  //表单验证通过
  const onFinish = (values: any) => {
    console.log('Success:', values);
    //关闭模态框
    setIsModalOpen(false);
  };
  //表单验证不通过
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  //选中商品类别
  const handleselectCategory=(value:string,option:any)=>{
    console.log(value)
    console.log(option)
  }
  //modal打开的时候，发起类目请求
  useEffect(()=>{
    getCategoryApi()
    .then(res=>{
        console.log(res)
        let options=res.data.data.map((item:any)=>({
          label:item.categoryName,
          value:item.category_id
        }))
        setCategoryOption(options)
        setSelectLoading(false)
    })
  },[])
  return (
    <>
      <Button type="primary" onClick={showModal}>
        添加商品
      </Button>
      <Modal cancelText="取消" okText="确定" title="添加商品" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <Form
      form={loginForm}
      name="add-product"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item label='产品图片'>
          <MyUpload></MyUpload>
      </Form.Item>
      <Form.Item label='商品类别' name="category_id" initialValue={categoryOption[0]} rules={[{ required: true, message: '请输入商品类别' }]}>
            <Select
           
            style={{ width: 120 }}
            onChange={handleselectCategory}
            loading={selectLoading}
            options={categoryOption}
            />
      </Form.Item>
      <Form.Item
        label="商品名称"
        name="productName"
        rules={[{ required: true, message: '请输入商品名称' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="商品价格"
        name="price"
        rules={[{ required: true, message: '请输入商品价格' }]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        label="商品库存"
        name="inventory"
        rules={[{ required: true, message: '请输入商品库存' }]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        label="商品描述"
        name="description"
        rules={[{ required: true, message: '请输入商品描述' }]}
      >
        <Input/>
      </Form.Item>
    </Form>
      </Modal>
    </>
  );
};

export default MyModel;
